import React from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { SubNavMenu, SubNavItem, SubNavSubItem } from 'components/navListMenv'
import { Header, Image } from 'semantic-ui-react'

const OrgNav = ({
  activeItem, link, orgName, projectName, role,
}) => (
  <SubNavMenu vertical tabular>
    <SubNavItem className="subnav top">
      <Header as="h2">
        <Image src="https://img.icons8.com/office/2x/tasks.png" />
      </Header>
    </SubNavItem>
    <SubNavItem className="subnav section" name="" />
    {(role === 'admin' || role === 'owner') && (
      <React.Fragment>
        <SubNavSubItem
          className={activeItem === 'dashboard' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/dashboard`)}
        >
          <a>
            <span>仪表盘</span>
          </a>
        </SubNavSubItem>
        <SubNavSubItem
          className={activeItem === 'dataset' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/dataset`)}
        >
          <a>
            <span>数据集</span>
          </a>
        </SubNavSubItem>
        <SubNavSubItem
          className={activeItem === 'task' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/task`)}
        >
          <a>
            <span>任务管理</span>
          </a>
        </SubNavSubItem>
        <SubNavSubItem
          className={activeItem === 'config' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/config`)}
        >
          <a>
            <span>设置</span>
          </a>
        </SubNavSubItem>
        <SubNavSubItem
          className={activeItem === 'user' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/user`)}
        >
          <a>
            <span>成员</span>
          </a>
        </SubNavSubItem>
        {/* <SubNavSubItem
          className={activeItem === 'assign' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/assign`)}
        >
          <a>
            <span>任务分配</span>
          </a>
        </SubNavSubItem> */}
        <SubNavSubItem
          className={activeItem === 'download' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/download`)}
        >
          <a>
            <span>下载</span>
          </a>
        </SubNavSubItem>
        <SubNavSubItem
          className={activeItem === 'work' ? 'subactive' : ''}
          onClick={() => link(`/project/${orgName}/${projectName}/work`)}
        >
          <a>
            <span>我的任务</span>
          </a>
        </SubNavSubItem>
      </React.Fragment>
    )}
    {role === 'member' && (
      <SubNavSubItem
        className={activeItem === 'work' ? 'subactive' : ''}
        onClick={() => link(`/project/${orgName}/${projectName}/work`)}
      >
        <a>
          <span>我的任务</span>
        </a>
      </SubNavSubItem>
    )}
  </SubNavMenu>
)

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  null,
  mapDispatchToProps,
)(OrgNav)
